<template>
  <div class="app-container">
    <!-- <el-form :model="inpData" v-show="showSearch" :inline="true">
      <el-form-item label="任务名称">
        <el-input v-model="inpData.taskName" placeholder="请输入任务名称" clearable style="width: 240px"
          @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="任务编号">
        <el-input v-model="inpData.taskNumber" placeholder="请输入任务编号" clearable style="width: 240px"
          @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="任务状态">
        <el-select placeholder="角色状态" clearable style="width: 240px">
          <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间" style="width: 308px;">
        <el-date-picker value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期"
          end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form> -->
    <el-row :gutter="10" class="mb8">
      <!-- <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
      </el-col>

      <right-toolbar v-model:showSearch="showSearch" @queryTable="getTaskList"></right-toolbar> -->
    </el-row>

    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column label="发布用户" align="center" key="nick" prop="userId" :show-overflow-tooltip="true" />
      <el-table-column label="接单用户" align="center" key="phone" prop="orderUserId" />
      <!-- 任务类型：厂商订单:GoodsOrder-1  散单任务:TaskOrder-2-->
      <el-table-column label="任务类型" align="center" key="nick" :show-overflow-tooltip="true">
        <template #default="scope">
          <!-- <div>{{ scope.row }}</div> -->
          <el-tag type="primary" v-if="scope.row.taskType === 'GoodsOrder'">厂商订单</el-tag>
          <el-tag type="info" v-else>散单任务</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="地址" align="center" key="nick" prop="address" :show-overflow-tooltip="true" />
      <el-table-column label="任务名称" align="center" key="nick" prop="taskName" :show-overflow-tooltip="true" />
      <el-table-column label="任务金额" align="center" key="nick" prop="taskMoney" :show-overflow-tooltip="true" />
      <el-table-column label="任务描述" align="center" key="nick" prop="taskDesc" :show-overflow-tooltip="true" />
      <el-table-column label="任务备注" align="center" key="nick" prop="taskComment" :show-overflow-tooltip="true" />
      <el-table-column label="任务发布日期" align="center" key="nick" prop="taskReleaseDate" :show-overflow-tooltip="true">
        <template #default="scope">
          <span>{{ parseTime(scope.row.taskReleaseDate) }}</span>
        </template>
      </el-table-column>
      <!--任务状态 待接单:WaitTakeOrders-10 进行中:UnderWay-20  已完成:Completed-30 待验收:WaitCheckAccept-40 已结款:BalanceDue-50-->
      <el-table-column label="任务状态" align="state" key="taskStatus">
        <template #default="scope">
          <el-tag type="warning" v-if="scope.row.taskStatus === 10">待接单</el-tag>
          <el-tag type="primary" v-else-if="scope.row.taskStatus === 20">进行中</el-tag>
          <el-tag type="info" v-else-if="scope.row.taskStatus === 30">已完成</el-tag>
          <el-tag type="danger" v-else-if="scope.row.taskStatus === 40">待验收</el-tag>
          <el-tag type="success" v-else>已结款</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="creationTime" width="160">
        <template #default="scope">
          <span>{{ parseTime(scope.row.taskDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-tooltip content="修改" placement="top">
            <el-button type="primary" link icon="Edit" size="large" @click="handleUpdate(scope.row)">
            </el-button>
          </el-tooltip>
          <el-tooltip content="删除" placement="top">
            <el-button type="danger" link icon="Delete" size="large" @click="handleDelete(scope.row)">
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="Number(total)" @pagination="getTaskList" />

    <!-- 添加或修改角色配置对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form :model="formData" :rules="rules" label-width="100px">
        <!-- <el-form-item label="发布用户" prop="userId">
          <el-input placeholder="请输入发布用户" />
        </el-form-item>
        <el-form-item label="任务类型" prop="taskType">
          <el-radio-group v-model="taskTypeNum">
            <el-radio value="1">厂商订单</el-radio>
            <el-radio value="2">散单任务</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="任务名称" prop="taskName">
          <el-input placeholder="请输入任务名称" />
        </el-form-item>
        <el-form-item label="任务地址" prop="address">
          <el-input placeholder="请输入任务地址" />
        </el-form-item>
        <el-form-item label="任务金额" prop="taskMoney">
          <el-input placeholder="请输入任务金额" />
        </el-form-item> -->
        <el-form-item label="任务描述" prop="taskDesc">
          <el-input v-model="formData.taskDesc" placeholder="请输入任务描述" />
        </el-form-item>
        <el-form-item label="任务备注" prop="taskComment">
          <el-input v-model="formData.taskComment" placeholder="请输入任务备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 分配角色数据权限对话框 -->
    <el-dialog :title="title" v-model="openDataScope" width="500px" append-to-body>
      <el-form :model="form" label-width="80px">
        <el-form-item label="角色名称">
          <el-input :disabled="true" />
        </el-form-item>
        <el-form-item label="权限字符">
          <el-input :disabled="true" />
        </el-form-item>
        <el-form-item label="权限范围">
          <el-select v-model="form.dataScope" @change="dataScopeSelectChange">
            <el-option v-for="item in dataScopeOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据权限" v-show="form.dataScope == 'CUSTOM'">
          <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
          <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
          <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动
          </el-checkbox>
          <el-tree class="tree-border" :data="deptOptions" show-checkbox default-expand-all ref="deptRef" node-key="id"
            :check-strictly="!form.deptCheckStrictly" empty-text="加载中，请稍候"
            :props="{ label: 'label', children: 'children' }"></el-tree>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitDataScope">确 定</el-button>
          <el-button @click="cancelDataScope">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
// query 是get请求
// params 是post请求

import { getTask, editTask, deleteTask } from "@/api/task/request";
import { onMounted, ref } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus';
// 表单内容 将来进行搜索操作的时候传递给后端
const inpData = ref([
  {
    // 任务名称
    taskName: '',
    // 任务编号
    taskNumber: '',
    // 状态
    status: '',
    // 日期范围
    dateRange: []
  }
])


// 控制输入框的显示与隐藏
const showSearch = ref(true);
// 控制模态框的显示与隐藏
const open = ref(false);
//获取的表格数据
const tableData = ref([]);
// 分页器的总数
const total = ref();

// 模态框的标题
const title = ref('编辑');

// 任务类型默认选择
const taskTypeNum = ref('1');

// 弹窗的数据 点击确定后返回给后端

const formData = ref([
  {
    // 发布用户
    userId: '',
    // 任务名称
    taskName: '',
    // 任务类型
    taskType: '',
    // 任务金额
    TaskMoney: '',
    // 任务描述
    taskDesc: '',
    // 任务备注
    taskComment: '',
    // 任务地址
    Address: '',
    // 
  }
]);


// 获取任务列表
const getTaskList = async () => {
  const res = await getTask();
  total.value = res.data.total.value;
  tableData.value = res.data.datas;
}
// 获取下拉框列表

onMounted(() => {
  getTaskList();
});

/** 点击搜索按钮 将输入框的内容 提交给后端 进行搜索 */
function handleQuery() {
  console.log('点击搜索');
  getTaskList();
}

/** 重置按钮操作 将表单内容清空 重新获取数据*/
function resetQuery() {
  inpData.value = [];
  getTaskList();
}

/** 多选框选中数据 */
function handleSelectionChange(selection) {
  console.log(selection, '选中数据');

}
/** 添加角色 修改标题 打开模态框 提交输入的数据给后端 刷新数据*/

function handleAdd() {
  title.value = "添加角色";
  open.value = true;
  console.log('添加');
  // 提交数据给后端 走接口
  // 重新获取数据
  getTaskList();

}

/** 编辑按钮 打开模态框 修改标题 回显内容 修改完毕后提交输入的数据给后端 刷新数据*/
const handleUpdate = async (row) => {
  open.value = true;
  title.value = "编辑";
  // 回显数据 任务描述(taskDesc) 和任务备注(taskComment)  
  formData.value.taskDesc = row.taskDesc;
  // formData.value.taskComment = row.taskComment;
  // 提交数据给后端 走接口
  await editTask(row.taskId).then(() => {
    open.value = false;
    getTaskList();
    ElMessage.success('修改成功');
  });
  // 重新获取数据
  getTaskList();
}

/** 删除按钮操作 二次确认 删除以后重新获取列表*/
const handleDelete = async (row) => {
  const res = await deleteTask(row.taskId);
  ElMessageBox.confirm('你确定要删除吗?').then(() => {
    ElMessage({
      message: '删除成功',
      type: 'success',
    });
    getTaskList();
    done()
  }).catch(() => {
    ElMessage({
      message: '删除失败：' + (res.message || '未知错误'),
      type: 'error',
    });
  })

};

/** 添加任务的确定按钮  提交给后端 重新获取数据*/
const submitForm = async () => {
  console.log('提交');
  // 模拟提交成功后关闭模态框
  open.value = false;
  handleUpdate()

  // 重新获取任务列表
  getTaskList();
};


/** 添加任务的取消按钮 关闭模态框 */
function cancel() {
  console.log('取消');
  open.value = false;
}

</script>